<template>
    <div>
        <div style="height: fit-content;margin: 0px 15px 0 15px;">
            <div class="bottom-charts-container">
                <div class="bottom-charts-item">
                    <el-card style="height: fit-content;margin: 5px;">
                        <div slot="header">
                            <span>校区宿舍分布人数统计</span>
                        </div>
                        <div style="min-height: 280px;height: fit-content;">
                            <div class="campus-dms-count-container">
                                <div class="campus-dms-count-item" v-for="(v, i) in init_park_list" :key="i">
                                    <circle-progress
                                        :percentage="(isNaN(v.allIn / v.all) ? 0 : Math.round(v.allIn / v.all * 10000) / 100).toString()"
                                        :abstract="v.allIn.toString()" :title="(v.campusName + '·' + v.parkName).length > 8 ? v.parkName : v.campusName
                                            + '·' +
                                            v.parkName" :shade="progress_color[i]" />

                                    <div style="margin: 10px auto;">
                                        <div class="stuCountText">男生占比
                                            <span :style="v.boyIn >= v.girlIn ? { color: progress_color[i][1] } : {}"
                                                class="stuCountNumber">

                                                {{ (isNaN(v.boyIn / v.allIn) ? 0 : Math.round(v.boyIn /
                                                    v.allIn * 10000) / 100).toString() }}％
                                            </span>
                                        </div>

                                        <div class="stuCountText">女生占比
                                            <span :style="v.boyIn < v.girlIn ? { color: progress_color[i][1] } : {}"
                                                class="stuCountNumber">
                                                <!-- {{ v.girlIn }} -->
                                                {{ (isNaN(v.girlIn / v.allIn) ? 0 : Math.round(v.girlIn
                                                    /
                                                    v.allIn * 10000) / 100).toString() }}％
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </el-card>
                </div>

                <div class="bottom-charts-item">
                    <el-card style="margin: 5px;">
                        <div slot="header">
                            <span>优秀毕业生情况</span>
                        </div>
                        <div style="position: relative;top: -20px;" class="echart" id="mychart2" :style="myChartStyle">
                        </div>

                    </el-card>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import {
    countParkStuIn
} from "@/api/dormitory/basedata/dormitory";
import * as echarts from "echarts";
import { isEmpty, groupBy } from "@/api/helpFunc";
import { countBiyeYearDept } from "@/api/stuCQS/good/apply";
import CircleProgress from "@/components/CircleProgress";
import { checkPermi } from "@/utils/permission";


export default {
    name: "jwc-bottom",
    components: {
        CircleProgress
    },
    data() {
        return {
            progress_color: [
                ['rgb(71,192,93)', 'rgb(142,239,98)'],
                ['rgb(255,135,37)', 'rgb(255,179,127)'],
                ['rgb(255,54,125)', 'rgb(255,117,159)'],
            ],

            myChartStyle: { float: "left", width: "400px", height: "300px", margin: 0 },//图表样式

            init_park_list: []
        }
    },
    created() {
        if (checkPermi(['home:xg:undo1'])) {
            this.countParkStuIn();
        }
    },
    mounted() {
        if (checkPermi(['home:xg:undo1'])) {
            this.initEcharts2();
        }
    },
    methods: {



        async countParkStuIn() {
            let res = await countParkStuIn();
            if (res.code == 200) {
                this.init_park_list = [...res.data];
            }
        },
        customColorMethod(percentage) {
            if (percentage < 40) {
                return '#67c23a';
            } else if (percentage < 75) {
                return '#e6a23c';
            } else {
                return 'red';
            }
        },

        async initEcharts2() {

            let year_list = [];
            let dept_list = [];
            let v_list = [];

            let res = await countBiyeYearDept();
            if (res.code == 200) {
                let data = [...res.data];

                let temp1 = groupBy(data, x => x.deptName);
                let temp2 = groupBy(data, y => y.stuYearName);


                for (let key in temp1) {
                    dept_list.push(key.replace("\"", '').replace('"', ''));
                }



                for (let key in temp2) {
                    year_list.push(key.replace("\"", '').replace('"', ''));
                }


                dept_list.map(x => {

                    let temp = {
                        name: x,
                        type: 'line',
                        stack: 'total',
                        data: []
                    };

                    year_list.map(y => {

                        let v_data = data.filter(z => z.stuYearName == y && z.deptName == x);

                        if (!isEmpty(v_data)) {
                            temp.data.push(v_data[0].majorCount);
                        } else {
                            temp.data.push(0);
                        }
                    });
                    v_list.push(temp);



                });
            }

            let option = {
                tooltip: {
                    trigger: 'axis',
                    position: [10, 10]
                },
                legend: {
                    data: [...dept_list],
                    left: '3%',
                    right: '4%',
                    bottom: '0%'
                },
                grid: {
                    top: "10%",
                    left: '3%',
                    right: '4%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        //saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: [...year_list]
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    ...v_list
                ]
            };

            const myChart = echarts.init(document.getElementById("mychart2"));
            myChart.setOption(option);
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
                myChart.resize();
            });


        },

    }
}


</script>

<style scoped lang="scss">
.bottom-charts-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.bottom-charts-item {
    flex-basis: 50%;
}

.campus-dms-count-container {
    display: flex;
    flex-wrap: wrap;
}

.campus-dms-count-item {
    flex-basis: 33.33%;
}

.stuCountText {
    line-height: 2rem;
    font-size: 0.75rem;
}

.stuCountNumber {
    font-size: 0.8rem;
}
</style>